<template>
  <el-aside :width="sidebar.isCollapse ? '64px' : '240px'" > 

    <div style="padding: 10px 0; text-align: center;">
      <img src="@/assets/logo/logo-94.png" style="width: 45px; height: 45px;">
      <span v-show="!sidebar.isCollapse"
            style="font-size: 1.4em; font-weight: 700; color: rgb(56,18,110); margin-left: 10px;">51code.vip</span>
    </div>
  
    <el-menu @select="handleSelect" :default-active="activeTab" :collapse="sidebar.isCollapse"
             class="aside-vertical-menu">
      <template v-for="menu in menuList" :key="menu.name">
        <el-sub-menu v-if="menu.childMenus && menu.childMenus.length" :index="menu.name">
          <template #title>
            <el-icon>
              <component :is="menu.icon"/>
            </el-icon>
            <span>{{ menu.title }}</span>
          </template>

          <el-menu-item v-for="child in menu.childMenus" :key="child.name" :index="child.name">
            <el-icon>
              <component :is="child.icon"/>
            </el-icon>
            <span>{{ child.title }}</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item v-else :index="menu.name">
          <el-icon>
            <component :is="menu.icon"/>
          </el-icon>
          <span>{{ menu.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </el-aside>
</template>

<script setup>
import {ref, onMounted, computed} from 'vue'
import {useSidebarStore} from '@/stores/sidebar'
import {useRoute, useRouter} from 'vue-router'
import {useTabsStore} from '@/stores/tabs.js'

const sidebar = useSidebarStore()
const tabsStore = useTabsStore()
const router = useRouter()
const route = useRoute()

// 菜单列表
const menuList = ref([])

// 加载用户菜单
const loadUserMenu = () => {
    const operateList = localStorage.getItem('operateList')
    if (operateList) {
        try {
            const menuData = JSON.parse(operateList)
            if (menuData.code === "200" && menuData.result) {
                console.log('加载菜单数据：', menuData.result)
                menuList.value = menuData.result
            }
        } catch (error) {
            console.error('解析菜单数据失败：', error)
        }
    }
}

// 处理菜单选择
const handleSelect = (index) => {
    // 查找选中的菜单项
    const findMenuItem = (items) => {
        for (const item of items) {
            if (item.name === index) return item
            if (item.childMenus) {
                const found = findMenuItem(item.childMenus)
                if (found) return found
            }
        }
        return null
    }

    const selectedItem = findMenuItem(menuList.value)
    
    if (selectedItem) {
        // 添加到标签页
        tabsStore.addTab({
            title: selectedItem.title,
            name: selectedItem.name
        })
        
        // 构建路由路径
        let path = selectedItem.path
        if (!path.startsWith('/')) {
            // 如果是子菜单，需要找到父菜单的路径
            const parentMenu = menuList.value.find(menu => 
                menu.childMenus?.some(child => child.name === selectedItem.name)
            )
            if (parentMenu) {
                path = `${parentMenu.path}/${path}`
            }
        }
        
        // 路由跳转
        router.push(path)
    }
}

//当前激活的标签页
const activeTab = computed(() => tabsStore.activeTab)

// 组件挂载时加载菜单
onMounted(() => {
    loadUserMenu()
})
</script>

<style lang="less" scoped>
.aside-vertical-menu:not(.el-menu--collapse) {
  width: 235px;
  min-height: 100vh;
}
</style>